
<template>
  <div class="tenement_sixth" >
    <Header title="告警规则管理" @del="del" @add="add" />
    <!-- 导入新增组件并渲染组件 -->
    <addConent v-show="appear" @click="flag"/> 
      <div class="main" v-show="!appear">
      <div class="nav">
        <div class="kuang">
          <el-form class="form">
            <div class="left">
              <span>告警名称：</span>
              <el-input placeholder="请输入项目名称" />
            </div>
            <div class="right">
              <span>推送方式：</span>
              <el-select placeholder="请选择">
                <el-option label="手机" value="" />
                <el-option label="邮箱" value="" />
                <el-option label="APP" value="" />
              </el-select>
            </div>
            <div class="btns">
              <el-button type="success" class="chaxun" @click="inquire">查询</el-button>
              <el-button type="info" plain>重置</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <div class="tableBox">
        <Table
          :data="tableData"
          @check="check"
          @check-all="checkAll"
          :keys="[
            'createTime',
            'pushMode',
            'ruleId',
            'ruleName',
            'warnClass',
            'warnRule',
            'warnType',
            'warnUser',
          ]"
          :label="[
            '值',
            '告警规则名称',
            '通知用户',
            '推送方式',
            '告警规则',
            '告警类型',
            '告警等级',
            '创建时间',
          ]">
          <template #btn> 
              <el-button @click="info"> 详情 </el-button>
              <el-popconfirm title="您确认删除这条内容嘛？">
                <template #reference>
                  <el-button @click="singleDel"> 删除 </el-button>
                </template>
              </el-popconfirm>
          </template>
          
        </Table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as service from '../../../api/wc';
import { ref,onMounted } from "vue";
import Table from "@/components/common/MyTable.vue";
import Header from "@/components/common/MyHeader.vue";
import addConent from "@/components/wc_components/addConent.vue"


var appear = ref();
var tableData = ref([]);
var info:any = ref('');
// 发请求获取单个数据
var check = async (select, row) => {
  var res = await service.alarm_queryByid( {id:66} )
};
var checkAll = (a) => {
};

var tableData = ref([]);

var flag = (e)=>{
  if(e.target.className=="quxiao"){
    appear.value=!appear.value
  }
}
// 获取分页数据
onMounted( async ()=>{
  var res = await service.alarm_page()
  tableData.value = res.data.data
})

// 新增添加视图切换
var add =  () => {
  appear.value = !appear.value;
};

// 批量删除
var del = async () => {
 var res = await service.alarm_deleteall({ids:'8'})
};

// 单个删除
var singleDel =async ()=>{
  var res = await service.alarm_delete({id:6})
}

// 查询
var inquire = async ()=>{
  var res = await service.alarm_queryByid({id:2}) 
}

// 详情（编辑）
var single = async ()=>{
  // var res = await service.alarm_edit({
  //   ruleId:6,
  //   ruleName:'',
  //   warnUser:'',
  //   pushMode:'',
  //   warnRule:'',
  //   warnType:'',
  //   warnClass:'',
  //   createTime:''
  // })
  // console.log(res);
}




</script>

<style scoped lang="scss">
.tenement_sixth {
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  .header {
    display: flex;
    justify-content: space-between;
    height: 60px;
    background: #fff;
    align-items: center;
    padding: 0 10px;
    padding-right: 20px;
    margin-bottom: 10px;
    h3 {
      display: flex;
      height: 100%;
      margin-left: 30px;
      font-weight: 600;
      span {
        width: 8px;
        flex: 1;
        background: rgb(94, 128, 234);
        margin-right: 15px;
      }
    }
    .right {
      .add {
        margin-right: 20px;
      }
    }
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0 20px;
    .nav {
      height: 200px;
      display: flex;
      flex-direction: column;
      .tab {
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        span {
          height: 100%;
          padding: 0 30px;
          font-size: 14px;
        }
        span:hover {
          color: green;
          border-bottom: 1px solid green;
        }
      }
      .kuang {
        flex: 1;
        padding: 30px 0;
        .form {
          border: 1px solid #999;
          border-radius: 8px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          > div {
            display: flex;
            flex: 2;
            margin: 0 20px;
            align-items: center;
            span {
              white-space: nowrap;
              font-size: 14px;
            }
          }
          .btns {
            flex: 1;
            display: flex;
            justify-content: right;
            .chaxun {
              margin-right: 30px;
            }
          }
        }
      }
    }
    .tableBox {
      flex: 1;
      position: relative;
      .table {
        text-align: left;
        :deep(td),
        :deep(th) {
          font-weight: 400;
          border: 1px solid #eee;
          padding-left: 10px;
        }
      }
    }
  }
}
</style>

